import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
import {Button} from "antd"
import { BrowserRouter, Route, Routes,Router,useNavigate,Link,Outlet } from "react-router-dom";
function App() {
  const [count, setCount] = useState(0);
  const history =useNavigate()
const handlecanvas=()=>{
  history(`/Cavans`)
}
const handledemo1=()=>{
  history('/invoices')
}
  return (
    <div className="App">
      <div className="Layout">
        <ul>
          <li onClick={()=>{history('/')}}>首页</li>
          <li onClick={()=>{history('/Cavans')}}>canvas栗子</li>
          <li onClick={()=>{history('/invoices')}}>列表</li>
          <li onClick={()=>{history('/notice')}}>notice组件</li>
          <li onClick={()=>{history('/drx')}}>redux实例</li>
        </ul>
      </div>
      <div>
        <h3
          onClick={() => {
            setCount(count + 1);
          }}
        >
          <Button type="primary">{count}</Button>
        </h3>
        <img
          src="/vite.svg"
          className="logo"
          alt="Vite logo"
          onClick={handlecanvas}
        />
        <img
          src={reactLogo}
          className="logo react"
          alt="React logo"
          onClick={handledemo1}
        />
        <div>{/* <Link to='Demo2'>Demo</Link> */}</div>
      </div>
      <Outlet />
    </div>
  );
}

export default App;
